// 加载地图
import AMapLoader from "@amap/amap-jsapi-loader";
import company from "@/assets/images/company_default.png";
import company4 from "@/assets/images/cs_default.png";
import company2 from "@/assets/images/car_red.png";
import company3 from "@/assets/images/car_default.png";
import company5 from "@/assets/images/storage_default.png";
import allData from "@/stores/data";

function loadTheMap(plugins: string[]) {
  window._AMapSecurityConfig = {
    securityJsCode: "fe5cebe5de8f748ada96b5eb4a47460a",
  };
  return AMapLoader.load({
    key: "2512515557b940cae9fe9c16c8a5f4f5", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins,//需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
}

// 创建地图
function createAMap(AMap: any, center: number[]) {
  return new AMap.Map("mapContainner", {
    // 设置地图容器id
    viewMode: "3D", // 是否为3D地图模式
    zoom: 11, // 初始化地图级别
    center, // 初始化地图中心点位置
  });
}

// 添加点标记
function addAPointMarker(AMap: any, item: any) {
  return new AMap.Marker({
    position: new AMap.LngLat(item.lngLat[0], item.lngLat[1]),
    icon: createIcon(AMap, item),
    offset: new AMap.Pixel(-13, -30)
  })
}

function createIcon(AMap: any, item: any) {
  return new AMap.Icon({
    // 图标尺寸
    size: new AMap.Size(25, 34),
    // 图标的取图地址
    image: item.id === 1 ? company : item.id === 2 ? company4 : item.id === 3 ? company2 : item.id === 4 ? company3 : company5,

    // 图标所用图片大小
    imageSize: new AMap.Size(30, 50),
    // 图标取图偏移量
    imageOffset: new AMap.Pixel(0, 0)
  });
}

// 创建信息窗体
function createAnInformationForm(AMap: any, item: any, map: any, marker: any,arr: any) {
  return new AMap.InfoWindow({
    isCustom: true,  //使用自定义窗体
    content: createInfoWindow(AMap, item, map, marker,arr),
    offset: new AMap.Pixel(16, -45)
  });
}

function createInfoWindow(AMap: any, item: any, map: any, marker: any,arr: any) {
  console.log(item)
  const info = document.createElement("div");
  info.className = "custom-info input-card content-window-card";
  //可以通过下面的方式修改自定义窗体的宽高
  info.style.width = "400px";
  // 定义顶部标题
  const top = document.createElement("div");
  const titleD = document.createElement("div");
  const closeX = document.createElement("img");
  top.className = "info-top";
  titleD.innerHTML = item.name;
  closeX.src = "https://webapi.amap.com/images/close2.gif";
  closeX.onclick = function closeInfoWindow() {
    map.clearInfoWindow();
  };

  top.appendChild(titleD);
  top.appendChild(closeX);
  info.appendChild(top);
  info.appendChild(createconter(AMap, item, map, marker,arr));
  return info

}

function createconter(AMap: any, item: any, map: any, marker: any,arr: any) {
  console.log(item)
  const info = document.createElement("div");
  const middle = document.createElement("div");
  const p = document.createElement("div");
  const p2 = document.createElement("div");
  const p1 = document.createElement("div");
  const p3 = document.createElement("div");
  const s2 = document.createElement("div");
  const s3 = document.createElement("div");
  const t1 = document.createElement("div");
  // 地址
  const o1 = document.createElement("div");
  // PM2.5
  const o2 = document.createElement("div");
  // 所属企业
  const o3 = document.createElement("div");
  // 报警类型
  const o4 = document.createElement("div");
  // 发送时间
  const o5 = document.createElement("div");
  // 所属工地
  const o6 = document.createElement("div");
  // 容量
  const o7 = document.createElement("div");
  // 百分比
  const o8 = document.createElement("div");
  const btn = document.createElement("button");
  btn.className = "btn";
  p1.className = "p1";
  p3.className = "p3"
  s2.className = "s2"
  o5.className = "o5";
  o7.className = "o7";
  o8.className = "o8";
  middle.className = "info-middle";
  middle.style.backgroundColor = 'white';
  middle.appendChild(o1);
  middle.appendChild(o2);
  middle.appendChild(o3);
  middle.appendChild(o4);
  middle.appendChild(o5);
  middle.appendChild(o6);
  middle.appendChild(o7);
  middle.appendChild(o8);
  info.appendChild(middle);
  // 经纬度
  middle.appendChild(p);
  middle.appendChild(p1);
  // type=0
  middle.appendChild(p2);
  middle.appendChild(p3);
  // type=2
  middle.appendChild(s2);
  middle.appendChild(s3);
  // type=3
  middle.appendChild(t1);
  p.innerHTML = '经度' + item.lngLat[0];
  p1.innerHTML = '纬度' + item.lngLat[1];
  if (item.type === 0) {
    createACompany()

  }
  if (item.type === 1) {
    createAJobsite()

  }
  if (item.type === 2) {
    createCar(AMap, item, map, marker,arr)
  }
  if (item.type === 3) {
    createAPiggyBank()
  }

  function createAPiggyBank() {
    o3.innerHTML = '所属企业：邯郸市叁龙干混砂浆制造有限公司'
    o1.innerHTML = '详细位置：河北省邯郸市万浩丽城'
    t1.innerHTML = '重量：' + item.weight
    o4.innerHTML = '报警类型：'
    o5.innerHTML = '发送时间：2018-11-2715:13'
    o6.innerHTML = '所属工地：万浩三期'
    o7.innerHTML = '容量：35000kg'
    o8.innerHTML = '百分比：1.4%'
  }

  function createCar(AMap: any, item: any, map: any, marker: any,arr: any) {
    middle.appendChild(btn)
    btn.innerHTML = '轨迹回放';
    s2.innerHTML = '速度：' + item.speed
    s3.innerHTML = '是否越界:' + item.alarmInformation
    o1.innerHTML = '详细位置：' + item.map
    o3.innerHTML = '所属企业：邯郸全有生态建材有限公司'
    o4.innerHTML = '待处理报警类型：车辆超速'
    o5.innerHTML = '发送时间：2018-12-2814:24'
    btn.onclick = function trackPlayback() {
      createtrackPlayback(AMap, item, map, marker,arr)
    }
  }

  function createtrackPlayback(AMap: any, item: any, map: any, marker: any,arr: any) {
    // console.log('ceshi')
    //   创建轨迹回放
    const lineArr = item.lineArr;
    new AMap.Polyline({
      map: map,
      path: lineArr,
      showDir: true,
      strokeColor: "#28F",  //线颜色
      // strokeOpacity: 1,     //线透明度
      strokeWeight: 6,      //线宽
      // strokeStyle: "solid"  //线样式
    });


    const passedPolyline = new AMap.Polyline({
      map: map,
      strokeColor: "#AF5",  //线颜色
      strokeWeight: 6,      //线宽
    });
    marker.on('moving', function (e: any) {
      passedPolyline.setPath(e.passedPath);
      map.setCenter(e.target.getPosition(), true)
    });
    console.log(arr)
    arr[0].value.onclick= function (){
      marker.moveAlong(item.lineArr, {
        speed:arr[3].value,
        // 每一段的时长
        // duration: 500,//可根据实际采集时间间隔设置
        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
        autoRotation: true,
      });
    }
    arr[1].value.onclick= function (){
      marker.pauseMove();
    }
    arr[2].value.onclick= function (){
      marker.resumeMove();
    }

  }

  function createAJobsite() {
    o1.innerHTML = '详细位置：河北省邯郸市丛台区大美如园(建设中)'
  }

  function createACompany() {
    p2.innerHTML = '门禁状态：' + item.access;
    o2.innerHTML = 'PM2.5:正常|76.00';
    p3.innerHTML = '工作状态：' + item.status;

    o1.innerHTML = '详细位置：河北省邯郸市丛台区邯郸全有生态建材有限公司'
  }

  return info;
}
// 电子围栏
function electronicFence(arr1: any,AMap: any, map:any) {
  arr1[0].value.addEventListener('click', function () {
    const mouseTool = new AMap.MouseTool(map)
    mouseTool.polygon({
      strokeColor: "#FF33FF",
      strokeOpacity: 1,
      strokeWeight: 6,
      // strokeOpacity: 0.2,
      fillColor: '#1791fc',
      fillOpacity: 0.4,
      // 线样式还支持 'dashed'
      strokeStyle: "solid",
      // strokeStyle是dashed时有效
      // strokeDasharray: [30,10],
    })
    mouseTool.on('draw', function(event: any) {
      // event.obj 为绘制出来的覆盖物对象
      console.log(event.obj._opts.path)
      allData.filter(item=>item.type==2).forEach(item=>{
        var inRing = AMap.GeometryUtil.isPointInRing(item.lngLat, event.obj._opts.path);
        console.log(inRing)
      })

    })
    arr1[1].value.addEventListener('click', function (){
      mouseTool.close(false)
    })
  })
}
export {loadTheMap, createAMap, addAPointMarker, createAnInformationForm,electronicFence};
